<!-- page页面 -->
<template>
  <div>
    <h1>Page 分页</h1>
    <p class="pageP">当数据量较多时，使用分页可以快速进行数据切换。</p>
    <h2>默认用法</h2>
    <Page :total=total1 />
    <p class="pageP">通过设置 <code>Page</code> 的 <code>total</code> 属性，来给组件定义数据的数量。 </p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total /&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>上一页和下一页</h2>
    <Page :total=total :prevText=prevText :nextText=nextText />
    <p class="pageP">使用属性 <code>prevText</code> 和 <code>nextText</code> ，替代图标显示为文字。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total :prevText=prevText :nextText=nextText /&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100
              prevText: '上一页',
              nextText: '下一页'
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>不显示tital总数</h2>
    <Page :total=total :showTotal=isShow></Page>
    <p class="pageP">设置 <code>Page</code> 组件的 <code>showTotal</code> 属性为 <code>false</code> ,则可以隐藏总数的显示，默认为 <code>true</code> 。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total :showTotal=isShow&gt;&lt;/Page&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              isShow: false
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>不显示size长度</h2>
    <Page :total=total :showSize=isShow></Page>
    <p class="pageP">设置 <code>Page</code> 组件的 <code>showSize</code> 属性为 <code>false</code> ,则可以隐藏总数的显示，默认为 <code>true</code> 。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total :showSize=isShow&gt;&lt;/Page&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              isShow: false
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>不显示跳转页数</h2>
    <Page :total=total :showTotal=isShow :showSize=isShow :showOpt=isShow></Page>
    <p class="pageP">设置 <code>Page</code> 组件的 <code>showOpt</code> 属性为 <code>false</code> ,则可以隐藏总数的显示，默认为 <code>true</code> 。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total :showTotal=isShow :showSize=isShow :showOpt=isShow&gt;&lt;/Page&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              isShow: false
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>翻页事件</h2>
    <Page :total=total @current-change=pageChange></Page>
    <p class="pageP">您当前选择的是第<span style="padding:0 5px;">{{this.pageNum}}</span>  页</p>
    <p class="pageP">通过给 <code>Page</code> 组件添加 <code>current-change</code> 事件，触发再每一次翻页时的事件。同时也可触发跳至按钮的确认事件。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total @current-change=pageChange&gt;&lt;/Page&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              pageNum: '1'
            }
          },
          methods: {
            pageChange(page) {
              this.pageNum = page
            }
          },
        }
      &lt;/script&gt;
    </pre>
    <h2>选择每页长度时的事件</h2>
    <Page :total=total @on-page-size-change="pageSizeChange"/>
    <p class="pageP">当前每页显示多少条：<span>{{this.pageSize}}</span></p>
    <p class="pageP">通过给 <code>Page</code> 组件添加 <code>on-page-size-change</code> 事件，触发选择页数长度时的事件。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total @on-page-size-change=&quot;pageSizeChange&quot;/&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              pageNum: 1,
              pageSize: 10
            }
          },
          methods: {
            pageSizeChange(pageSize) {
              this.pageSize = pageSize
            }
          },
        }
      &lt;/script&gt;
    </pre>
    <h2>迷你型</h2>
    <Page :total=total size='small'/>
    <br><br>
    <Page
      class="mPage"
      :total=total
      size='small'
      :showOpt=false
      :showBtu=false />
    <p class="pageP">设置 <code>size</code> 为 <code>small</code> 使用迷你型，迷你型拥有普通的所以功能。</p>
    <p class="pageP">配合页面的响应式可通过设置 <code>Page</code> 组件的 <code>size</code> 属性为 <code>small</code> 修改 <code>Page</code> 尺寸。</p>
    <p class="pageP">同时可设置 <code>showTotal</code> 、 <code>showSize</code>  、 <code>showBtu</code> 的 <code>true</code> 或 <code>false</code> 来修改 <code>Page</code> 组件的展示样式。</p>
    <p>当屏幕宽度小于768px时，设置 <code>showOpt</code> 、 <code>showBtu</code> 为 <code>false</code> ，并添加 <code>size</code> 属性，值为 <code>small</code> 。</p>
    <p class="pageP">代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Page :total=total size='small'/&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;Page
          :total=total
          size='small'
          :showTotal=false
          :showSize=false
          :showOpt=false /&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {
              total: 100,
              pageNum: 1,
              pageSize: 10
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p class="pageP">Page props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <h2>Page events</h2>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      total: 100,
      total1: 70,
      prevText: '上一页',
      nextText: '下一页',
      isShow: false,
      pageNum: 1,
      pageSize: 10,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'total',
          explain: '数据总数',
          type: 'Number',
          default: '0'
        },
        {
          attribute: 'pageNum',
          explain: '当前页数',
          type: 'Number',
          default: '-'
        },
        {
          attribute: 'showTotal',
          explain: '是否显示总条数',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'showSize',
          explain: '是否显示条数选择框',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'showOpt',
          explain: '是否显示条数跳转',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'showBtu',
          explain: '是否显示确认按钮',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'showStandardText',
          explain: '是否是标准文字,此属性为gaia3.0适配，去掉才能显示图标',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'prevText',
          explain: '替代图标显示的上一页文字',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'nextText',
          explain: '替代图标显示的下一页文字',
          type: 'String',
          default: '-'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          width: 250,
          key: 'event'
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          event: 'current-change',
          type: '页码改变的回调，返回改变后的页码',
          callback: 'pageNum 页码'
        },
        {
          event: 'on-page-size-change',
          type: '页面选择后变更的回调',
          callback: 'pageSize 每页大小'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    pageChange (page) {
      this.pageNum = page
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
.pageP {
  padding: 10px 0;
}
</style>
